<template>
  <div class="disease-pest-view">
    <el-container class="min-h-screen">
      <el-row class="disease-left">
        <el-col>
          <el-card class="video-card">
            <el-tabs
              v-model="activeName"
              :stretch="true"
              class="demo-tabs"
              @tab-click="handleClick"
            >
              <el-tab-pane label="监控摄像" name="first" v-loading="loading">
                <!-- <video
                  class="w-full h-full rounded-lg"
                  controls
                  poster=""
                >
                  <source :src="getFireNewCheckcamnoplays" type="video/mp4">
                  您的浏览器不支持视频播放
                </video> -->
                <img class="w-full h-full rounded-lg" ref="mjpegElement" :key="getFireVideoFeedcamnoplays" style="display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 25%);" @click="icreamImg(getFireVideoFeedcamnoplays)" :src="getFireVideoFeedcamnoplays" @load="imageLoaded" alt="">
              </el-tab-pane>
              <el-tab-pane label="无人机巡检" name="second" v-loading="loadings">
                <!-- <video
                  class="w-full h-full rounded-lg"
                  controls
                  poster=""
                >
                  <source :src="noplays" type="video/*">
                  您的浏览器不支持视频播放
                </video> -->
                <img class="w-full h-full rounded-lg" ref="mjpegElementSec" :key="noplays" style="display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 25%);" @click="icreamImg(noplays)" :src="noplays" @load="imageLoadeds" alt="">
              </el-tab-pane>
              <el-tab-pane label="视频上传" name="third">
                <el-upload
                  class="video-upload"
                  :action= 'uploadUrl + "/euc/api/fire/video/start"'
                  list-type="picture-card"
                  :limit="1"
                  accept="video/*"
                  name="video"
                  v-if="!loadingThr"
                  :before-upload="beforeUploadVideo"
                  :on-progress="uploadVideoProcess"
                  :on-success="handleVideoSuccess"
                  >
                  <el-icon><Plus /></el-icon>上传视频
                </el-upload>
                <img :key="uplays" v-if="loadingThr" class="w-full h-full rounded-lg" ref="mjpegElementUp" style="display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 25%);" @click="icreamImg(uplays)" :src="uplays" @load="imageLoadedThr" alt="">
              </el-tab-pane>
            </el-tabs>
            <el-button class="ai-btn" type="success" @click="fireAnalysis()" :disabled="disabledBtn">火灾AI分析</el-button>
          </el-card>
        </el-col>
        <el-col style="margin: 2rem 0;">
          <el-card style="border: 1px solid #f00404;border-radius: 15px/15px;">
            <el-col class="dragTitle">火灾风险等级展示</el-col>
            <el-col class="drag-desc-title">{{riskLevelSign}}</el-col>
            <el-col>
              <div class="drag-box" :style="{backgroundImage: backgroundImages}">
                <div class="shadow-box" v-for="item in 20" :key="item"></div>
	            </div>
            </el-col>
          </el-card>
        </el-col>
        <el-col>
          <el-card class="disease-left-cardGroup">
            <habitLabel />
          </el-card>
        </el-col>
      </el-row>
      <el-row class="disease-right">
        <el-card class="disease-right-container">
          <el-button class="historyBtn" @click="dialogTableVisibles = true">历史记录</el-button>
          <el-row class="answersType" :span="24">
            <div class="answersTypeWR"  ref="listRef" v-show="messageContentAnswerShow">
              <div>
                <div class="questionAI">
                  <div class="questionAIMeg">{{ messageContentAnswer }}</div>
                </div>
              </div>
              <div v-show="!markdownText">方案生成中，请稍后……</div>
              <div v-html="markdown.render(markdownText)"></div>
            </div>
            <div style="margin-top: 0.8rem;" v-show="planBtn">
              <el-button style="border: 0 solid #fff;" :icon="Upload" @click="schemeExport()">方案导出</el-button>
              <el-button style="border: 0 solid #fff;" :icon="ChatDotSquare" @click="workOrderAssign()">工单指派</el-button>
            </div>
          </el-row>
          <el-row style="position: absolute;bottom: 4vh;width: calc(100% - 40px);">
            <el-input
              class="input-msg"
              v-model="messageContent"
              :autosize="{ minRows: 4, maxRows: 6 }"
              type="textarea"
              placeholder="有问题，尽管问"
              :disabled="disabledBtn"
              @keydown="handleKeyDown"
              @focus="messageInputActive = true"
              @blur="messageInputActive = false"
            />
            <img
              class="sub-img"
              :src="canSend ? activeSendIcon : inactiveSendIcon"
              alt="发送"
              @click="handleSend"
            />
          </el-row>
        </el-card>
      </el-row>
    </el-container>
    <div>
      <el-dialog v-model="dialogTableVisibles" title="历史记录">
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <h2 :id="titleId" :class="titleClass">历史记录</h2>
          </div>
        </template>
        <div v-for="values in gridData">
          <div  class="tableBor" v-for="value in values.content" @click="exportVb(value,values)">
            <div>
              <strong>{{ values.timestamp }}</strong>
            </div>
            <span>
              {{ value.query }}
            </span>
          </div>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog v-model="dialogTableVisibleImg">
        <img class="w-full h-full rounded-lg" ref="mjpegElementEnd" style="display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 25%);" :src="icreamImgsrc" @load="imageLoaded" alt="">
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted,computed,onBeforeUnmount,watch } from 'vue'
import { ElNotification,ElMessage } from 'element-plus'
import activeSendIcon from '@/assets/images/active-send-icon.png'
import inactiveSendIcon from '@/assets/images/inactive-send-icon.png'
import { Upload,ChatDotSquare, Watch } from '@element-plus/icons-vue'
import habitLabel from "./habitLabel.vue";
import { processStreamResponse,loadingText,conversation_id,loadingTextSigin } from '@/composables/useStreamResponse'
import { marked } from 'marked'
import { MarkdownToWordHtmlConverter } from '@/utils/markdownToWordHtml'
import { ImagePreprocessor } from '@/utils/markdownToDocx'
// 页面uuid生成
import { v4 as uuidv4 } from 'uuid';

// api
import {
  getFireVideoFeed,
  getFireVideoFeedcam,
  getFireNewCheckcam,
  getFireNewCheck,
  sendFireWxMeg,
  chatHistory,
  chatQu,
  saveChatWxMeg,
} from "@/api/disPestApi";
const isGenerating = ref<boolean>(false);
const messageContentAnswer = ref<string>('')
const planBtn = ref<boolean>(false)
const messageContentAnswerShow = ref<boolean>(false)

const labelAg = ref('first');
const uuidPro = ref(uuidv4());
const noplays = ref('');
const getFireVideoFeedcamnoplays = ref('');
const uplays = ref('');
const uploadFileId = ref('')
const stream_id = ref('');
const disabledBtn = ref(false);
const riskLevelSign = ref('未发现风险');
const backgroundImages = ref(`linear-gradient(to right, #b6b2b2, #b6b2b2, #b6b2b2)`);
const loading = ref(true);
const loadings = ref(true);
const loadingThr = ref(false);
const icreamImgsrc = ref('')
const mjpegElement = ref(null)
const mjpegElementSec = ref(null)
const mjpegElementEnd = ref(null)
const mjpegElementUp = ref(null)
const UpsrcVideo = ref('');

const riskLevel = [
  {
    level: '低风险火灾',
    backgroundImages: `linear-gradient(to right, #b6b2b2, #b6b2b2, #b6b2b2)`,
  },
  {
    level: '中风险火灾',
    backgroundImages: `linear-gradient(to right, #d4e207, #d4e207, #f00404)`,
  },
  {
    level: '高风险火灾',
    backgroundImages: `linear-gradient(to right, #f00404, #f00404, #d4e207)`,
  },
]
//演示报告随机ID
const fireID = [
  'fire_000010',
  'fire_000460',
  'fire_000910',
  'fire_001360',
  'fire_001510',
  'fire_001960',
  'fire_002410',
  'fire_002860',
  'fire_003310',
  'fire_003460',
  'fire_003910',
  'fire_004360',
  'fire_004810',
  'fire_005260',
  'fire_005410',
  'fire_005860',
  'fire_006330',
  'fire_006780',
  'fire_007350',
  'fire_007500',
  'fire_007950',
  'fire_008410',
  'fire_008860',
]

console.log(fireID[Math.floor(Math.random() * 22)])
const fireIDSuc = fireID[Math.floor(Math.random() * 22)];


const timer = setInterval(() => {
  // console.warn('定时检测' + labelAg.value);
  // if(labelAg.value == 'first') getFireNewCheckcamData(uuidPro.value);
  // else if(labelAg.value == 'second') getFireNewCheckData(uuidPro.value);
  // else if(labelAg.value == 'third') getFireNewCheckSuccess();
}, 5000);

const gridData = ref([])

const chatHistoryData = async () => {
  try {
    const res = await chatHistory('fire','');
    gridData.value = res.list;
  } catch (error) {
    ElMessage.error('获取分页查询聊天记录失败');
  }
}

const listRef = ref(null)
const onScrollChange = () => {
	setTimeout(() => {
		listRef.value.scrollTop = listRef.value.scrollHeight
	})
}
watch(() => loadingText, () => {
	if (loadingText) {
		onScrollChange()
	}
  if(!loadingTextSigin){
    planBtn.value = true
  }else{
    planBtn.value = false
  }
}, { deep: true })

const imageLoaded = () => {
  loading.value = false;
}
const imageLoadeds = () => {
  loadings.value = false;
}
const imageLoadedThr = () => {
  loadingThr.value = true;
}


const icreamImg = (icreamImgs: string) =>{
  dialogTableVisibleImg.value = true;
  icreamImgsrc.value = icreamImgs;
}

const exportVb = (value: [],values: []) => {
  if(!planBtn.value){
    ElMessage({
      message:'正在输出报告中，请稍后',
      type: 'warning'
    })
    messageContent.value = ''
    return
  }
  if(!stream_id.value){
    ElMessage({
      message: '当前无风险方案',
      type: 'warning'
    })
    return
  }
  console.log(value);
  console.log(values.conversationId);
  console.log(value.answer);
  loadingText.value += value.answer;
  dialogTableVisibles.value = false;
}

const saveChatWxMegFun = async (lelbe: string, conversationId: string) => {
  try {
    const res = await saveChatWxMeg(lelbe,conversationId);
    if(res.code) console.warn('保存更新聊天成功');
  } catch (error) {
    ElMessage.error('保存更新聊天失败');
  }
}


const chatQuData = async (lelbe: string, data: Object) => {
  try {
    saveChatWxMegFun(lelbe,conversation_id.value);
    const res = await chatQu(lelbe,data);
    if (res.ok) {
      await processStreamResponse(res)
    } else {
      throw new Error(`请求失败: ${res.status}`)
    }
  } catch (error) {
    ElMessage.error('聊天链接失败');
  }
}

watch([loadingText,messageContentAnswer,loadingTextSigin],([newValue,messageContentAnswern,loadingTextSigins],[oldValue,messageContentAnswerno,loadingTextSiginOld])=>{
  console.warn('监听');
  console.log(newValue);
  console.log(loadingTextSigins)
  if(loadingTextSigins){
    planBtn.value = true
  }else{
    planBtn.value = false
  }
  // if(loadingText){
  //   planBtn.value = true
  // }else{
  //   planBtn.value = false
  // }
  if(messageContentAnswern) messageContentAnswerShow.value = true
  else messageContentAnswerShow.value = false
  
  // const htmlContent = marked.parse(newValue)
  markdownText.value = newValue
})

const getFireNewCheckData = async (uuidPro:string) => {
  try {
    const res = await getFireNewCheck(uuidPro,false);
    stream_id.value = res.stream_id;
    console.log(res);
    if(res.detected == true) {
      // disabledBtn.value = false;
      uploadFileId.value = res.uploadFileId;
    }else {
      // disabledBtn.value = true;
    }
    if(res.risk_level == 1) {
      riskLevelSign.value = riskLevel[res.risk_level].level;backgroundImages.value = riskLevel[res.risk_level].backgroundImages
    }else if(res.risk_level == 2) {
      riskLevelSign.value = riskLevel[res.risk_level].level;backgroundImages.value = riskLevel[res.risk_level].backgroundImages
    }else if(res.risk_level == 0) {
      riskLevelSign.value = riskLevel[res.risk_level].level;backgroundImages.value = riskLevel[res.risk_level].backgroundImages
    }
    fireAnalysisData();
  } catch (error) {
    ElMessage.error('获取火灾最新检测结果失败');
  }
}

const getFireNewCheckcamData = async (uuidPro:string) => {
  try {
    const res = await getFireNewCheckcam(uuidPro);
    stream_id.value = res.stream_id;
    console.log(res);
    if(res.detected == true) {
      // disabledBtn.value = false;
      uploadFileId.value = res.uploadFileId;
    }else {
      // disabledBtn.value = true;
    }
    if(res.risk_level == 1) {
      riskLevelSign.value = riskLevel[res.risk_level].level;backgroundImages.value = riskLevel[res.risk_level].backgroundImages
    }else if(res.risk_level == 2) {
      riskLevelSign.value = riskLevel[res.risk_level].level;backgroundImages.value = riskLevel[res.risk_level].backgroundImages
    }else if(res.risk_level == 0) {
      riskLevelSign.value = riskLevel[res.risk_level].level;backgroundImages.value = riskLevel[res.risk_level].backgroundImages
    }
    fireAnalysisData();
  } catch (error) {
    ElMessage.error('获取火灾摄像头最新检测结果失败');
  }
}

const getFireVideoFeedcamData = (uuidPro:string) => {
  try {
    const res = getFireVideoFeedcam(uuidPro);
    getFireVideoFeedcamnoplays.value = res;
    icreamImgsrc.value = res;
  } catch (error) {
    ElMessage.error('获取火灾摄像头检测视频流失败');
  }
}

const getFireVideoFeedData = (uuidPro:string) => {
  try {
    const res = getFireVideoFeed(uuidPro);
    noplays.value = res;
    icreamImgsrc.value = res;
  } catch (error) {
    ElMessage.error('获取火灾检测视频流失败');
  }
}

const stopStream = () => {
  // 额外清理步骤
  if(mjpegElement?.value) mjpegElement?.value?.removeAttribute('src');
  if(mjpegElementSec?.value) mjpegElementSec?.value?.removeAttribute('src');
  if(mjpegElementEnd?.value) mjpegElementEnd?.value?.removeAttribute('src');
  if(mjpegElementUp?.value) mjpegElementUp?.value?.removeAttribute('src');
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  loading.value = true
  loadings.value = true
  // loadingThr.value = true
  uuidPro.value = uuidv4();
  labelAg.value = tab.props.name;
  stopStream()
  if(tab.props.name == 'first') getFireVideoFeedcamData(uuidPro.value);
  else if(tab.props.name == 'second') getFireVideoFeedData(uuidPro.value);
  else if(tab.props.name == 'third') mjpegElementUp?.value?.setAttribute('src',UpsrcVideo.value);
}

onMounted(() => {
  document.documentElement.style.setProperty('--el-color-primary', '#56AB2F'); // 设置主色
  document.documentElement.style.setProperty('--el-card-padding', '0');
  getFireVideoFeedcamData(uuidPro.value);
  chatHistoryData();
});

const uploadUrl = ref(import.meta.env.VITE_API_BASE_URL);
const activeName = ref('first');
const messageContent = ref('');
const messageInputActive = ref(false);
const dialogTableVisibles = ref(false)
const dialogTableVisibleImg = ref(false)
const markdownText = ref('');
const activeNames = ref(true)


// 处理发送消息
const handleSend = () => {
  if(!messageContent.value){
    ElMessage({
      message:'请输入你的问题',
      type: 'warning'
    })
    messageContent.value = ''
    return
  }

  if(!stream_id.value){
    ElMessage({
      message:'当前无风险方案',
      type: 'warning'
    })
    messageContent.value = ''
    return
  }
  if(!planBtn.value){
    ElMessage({
      message:'正在输出报告中，请稍后在输入',
      type: 'warning'
    })
    messageContent.value = ''
    return
  }
  messageContentAnswer.value = ''
  saveChatWxMegFun('fire',conversation_id.value);
  const data = {
    "query": messageContent.value.trim(),
    "conversationId": conversation_id.value,
    "uploadFileId": uploadFileId.value,
    // "streamId": stream_id.value
    "streamId": fireID[Math.floor(Math.random() * 22)]
  }
  messageContentAnswer.value = messageContent.value.trim()
  chatQuData('fire',data)
  

  // 清空输入
  messageContent.value = ''
}

// AI分析
const fireAnalysis = () => {
  if(labelAg.value == 'first') getFireNewCheckcamData(uuidPro.value);
  else if(labelAg.value == 'second') getFireNewCheckData(uuidPro.value);
  else if(labelAg.value == 'third') getFireNewCheckSuccess();
  // ElMessage({
  //   message: 'AI分析中',
  //   type: 'success',
  // })
  // const data = {
  //   "query": "识别一下图片",
  //   "conversationId": '',
  //   "uploadFileId": uploadFileId.value,
  //   "streamId": stream_id.value
  // }
  // messageContentAnswer.value = '请分析火情，并生成AI火情分析报告'
  // messageContentAnswerShow.value = true;
  // chatQuData('fire',data)
}

const fireAnalysisData = () => {
  ElMessage({
    message: 'AI分析中',
    type: 'success',
  })
  const data = {
    "query": "请分析火情，并生成AI火情分析报告",
    "conversationId": '',
    "uploadFileId": uploadFileId.value,
    // "streamId": stream_id.value
    "streamId": fireID[Math.floor(Math.random() * 22)]
  }
  messageContentAnswer.value = '请分析火情，并生成AI火情分析报告'
  messageContentAnswerShow.value = true;
  chatQuData('fire',data)
}


// 下载 Word（Base64 图片预处理）
const downloadWordWithBase64 = async (loadingText: string): Promise<void> => {
  isGenerating.value = true;

  try {
    // 预处理图片
    // const processedMarkdown = await ImagePreprocessor.convertImagesToBase64(loadingText);

    // console.log(processedMarkdown);
    
    // 生成 Word 文档
    await MarkdownToWordHtmlConverter.convertAndDownload(
      loadingText,
      'document-with-images.doc'
    );
    
  } catch (error) {
    console.error('Word 文档生成失败:', error);
    alert('文档生成失败，请检查控制台输出或尝试其他下载选项');
  } finally {
    isGenerating.value = false;
  }
}

// 方案导出
const schemeExport = async () => {
  ElMessage({
    message: '报告生成中',
    type: 'success'
  })
  const htmlContent = marked.parse(loadingText.value);
  console.warn('报告生成中');
  await downloadWordWithBase64(loadingText.value);
}
// 工单指派
const workOrderAssign = async () => {
  ElMessage({
    message: '正在指派中',
    type: 'success'
  })
  try {
    const res = await sendFireWxMeg('fire',conversation_id.value);
    if(res === true) {
      ElMessage({
        message: '指派成功',
        type: 'success',
      })
    };
  } catch (error) {
    ElMessage.error('发送微信消息失败');
  }
}

// 计算是否可以发送
const canSend = computed(() => {
  return messageContent.value.trim().length > 0
})

// 处理键盘事件
function handleKeyDown(event: KeyboardEvent) {
  if (event.key === 'Enter' && !event.ctrlKey) {
    event.preventDefault()
    handleSend()
  } else if (event.key === 'Enter' && event.ctrlKey) {
    // 按下 Ctrl + Enter 时让文本框正常换行
    messageContent.value += '\n'
    return
  }
}

const getFireNewCheckSuccess = async() => {
  try {
    const res = await getFireNewCheck(uuidv4(),false);
    stream_id.value = res.stream_id;
    console.log(res);
    if(res.detected == true) {
      // disabledBtn.value = false;
      uploadFileId.value = res.uploadFileId;
    }else {
      // disabledBtn.value = true;
    }
    if(res.risk_level == 1) {
      riskLevelSign.value = riskLevel[res.risk_level].level;backgroundImages.value = riskLevel[res.risk_level].backgroundImages
    }else if(res.risk_level == 2) {
      riskLevelSign.value = riskLevel[res.risk_level].level;backgroundImages.value = riskLevel[res.risk_level].backgroundImages
    }else if(res.risk_level == 0) {
      riskLevelSign.value = riskLevel[res.risk_level].level;backgroundImages.value = riskLevel[res.risk_level].backgroundImages
    }
    fireAnalysisData()
  } catch (error) {
    ElMessage.error('获取火灾最新检测结果失败');
  }
}

// 上传成功回调
const handleVideoSuccess = (response, file) => {
  console.log(file)
  if (response.data) {
  //  this.$message.success("视频上传成功！");
    ElNotification({
      title: '',
      message: '视频上传成功！',
    })
    UpsrcVideo.value = getFireVideoFeed(uuidv4()) + "?streamUrl=" + response.data
    uplays.value = UpsrcVideo.value
    loadingThr.value = true
    // getFireNewCheckSuccess()
  } else {
    ElNotification({
      title: '',
      message: '上传失败！',
    })
  }
}

onBeforeUnmount(() => {
// 执行清理工作
  clearInterval(timer)
  stopStream()
  console.log('离开页面');
});

</script>
<script  lang="ts">
import MarkdownIt from 'markdown-it';
import { forEach, random, reduce } from 'lodash'
export default {
 data() {
   return {
     videoUploadPercent: 0, // 上传进度
     messageContent:''
   };
 },
computed: {
  markdown() {
    return new MarkdownIt();
  },
  markdownText() {
    return marked.parse(markdownText.value);
  },
},
 methods: {
   // 上传前校验
   beforeUploadVideo(file) {
     const isVideo = ["video/mp4", "video/avi"].includes(file.type);
     const isLt50M = file.size / 1024 / 1024 < 50;
     if (!isVideo) {
      //  this.$message.error("请上传正确的视频格式！");
       ElNotification({
        title: '',
        message: '请上传正确的视频格式！',
      })
       return false;
     }
     if (!isLt50M) {
      //  this.$message.error("视频大小不能超过50MB！");
      ElNotification({
        title: '',
        message: '视频大小不能超过50MB！',
      })
       return false;
     }
     return true;
   },
   // 上传进度回调
   uploadVideoProcess(event, file) {
     this.videoUploadPercent = file.percentage.toFixed(0);
   },
 },
};
</script>
<style lang="scss" scoped>
.answersType{
  max-height: calc(100% - 18vh);margin-top: 3vh;
  .answersTypeWR {
    max-height: 70vh;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    .questionAI{
      display: flex;
      justify-content: start;
      align-items: flex-start;
      justify-content: end;
      .questionAIMeg{
        background: #baf0d8;
        border-radius: 0.4rem;
        padding: 0.8rem 0.8rem;
        margin: 2rem 0 0.3rem;
      }
    }
  }
}
::v-deep .el-dialog__body{
  max-height: 60vh !important;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
::v-deep .el-dialog__body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}
.tableBor:nth-child(even) {
  background-color: #dbdbdb;
}
.tableBor{
  padding: 1rem 1.2rem;
  border-top: 0.1rem solid #d4ddeb;
  border-bottom: 0.1rem solid #d4ddeb;
  strong{
    line-height: 2rem;
  }
}
.tableBor:hover{
  background-color: #99a9bf;
  cursor: pointer;
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}
::v-deep .el-carousel__indicators {
  width: 60% !important;
}
::v-deep .el-carousel__container {
  height: 100% !important;
}
::v-deep .is-active {
  // height: 0.2rem !important;
  .el-carousel__button {
    background-color: #2b6e50 !important;
    height: 0.2rem !important;
    border-radius: 10%/20%;
    width: 1.5rem;
  }
}
::v-deep .el-carousel__button {
  width: 0.8rem;
  height: 0.2rem !important;
  border-radius: 10%/20%;
}
::v-deep .el-upload-list__item {
  width: 100%;
  height: 100%;
  border: 0 solid #fff !important;
  margin: 0 !important;
}
::v-deep .el-upload-list__item-preview {
  display: none !important;
}
.cp-desc {
  font-size: 1rem;
}
.cp-title {
  font-size: 1.5rem;
  font-weight: bolder;
}
::v-deep .el-scrollbar__view{
  width: 100%;
  .el-table__body{
    width: 100%;
  }
}
.drag-desc-title {
  font-size: 2rem;
  font-weight: bolder;
  color: #f00404;
  margin: 0.8rem 0;
}
.dragTitle {
  font-size: 1.2rem;
  font-weight:bolder;
}
.historyBtn {
  line-height: 1rem;
  text-align: center;
  border-radius: 20%/55%;
  background-color: #e5ebf4;
  color: #000;
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  padding: 5px 16px;
  font-weight: bolder;
}
::v-deep .demo-tabs {
  overflow: hidden;
  .el-tabs__header {
    margin:0 0;
    background-color: #fffbf0;
  }
  .el-tabs__item {
    height: auto;
    margin: 0.6rem 0;
    font-size: 0.9rem;
  }
  .el-tabs__content {
    height: 12rem;
    .el-tab-pane {
      height: 100%;
      .el-upload--picture-card{
        border: 0 solid #fff;
        font-size: 1.4rem;
      }
      .video-upload {
        width: 100%;
        height: 100%;
        .el-upload-list {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
::v-deep .el-tabs__active-bar {
  display:none;
}
::v-deep .el-tabs__item:nth-child(3) {
  border-left: 1px solid #2b6e50;
  border-right: 1px solid #2b6e50;
}
::v-deep .demo-tabs .el-tabs__item{
  padding: 0 0;
}
::v-deep .el-upload-list {
  width: 100%;
  height: auto;
}
::v-deep .el-upload {
  width: 100%;
  height: auto;
}
.el-row{
  display: block !important;
}
el-col {
  height: auto !important;
}
.is-top {
  overflow: hidden !important;
}
.min-h-screen {
  padding: 1.25rem;
  // overflow: hidden;
  .disease-left {
    width: 24rem;
    display: flex;
    flex-direction: column;
    .video-card {
      .demo-tabs {
        border: 0.15rem solid #94b49f;
        border-radius: 3%/3%;
        overflow: hidden;
        .el-tabs__header{
          margin: 0 0!important;
        }
        video {
          width: 100%;
          height: 100%;
          opacity: 0.5;
        }
      }
    }
  }
  .disease-right {
    width: calc(100% - 24rem);
    margin: 0 0 0 2rem;
  }
  .disease-right-container{
    width: 100%;
    height: 95vh;
    position: relative;
  }
}
.video-upload {
  width: 100%;
  height: auto;
}
.ai-btn {
  margin: 1rem 1.3rem 0;
  width: calc(100% - 2.6rem);
}
::v-deep .el-button--success {
  background-color: #2b6e50;
}
.drag-box{
	width: 100%;
	background-image:linear-gradient(to right, #d4e207, #f00404, #fff);
	// border: 1px solid #23be7b;
	display: flex;
	justify-content: flex-start;
	position: relative;
	height: 1em;
  .shadow-box{
    height: 1em;
    flex: 1;/*根据需要展示方块数调整*/
    box-sizing: border-box;
    border:1px solid white;
    background-color: transparent;
  }
}
.disease-left-cardGroup {
  width: 100%;
  flex: 1;
  height: 40rem;
  .markdownsTitle {
    font-size: 2rem;
    line-height: 3rem;
    font-weight: bolder;
  }
  .markdownsContent {
    font-size: 1rem;
    line-height: 1.3rem;
    font-weight: bolder;
  }
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
  }
  .input-msg {
    height: 4rem;
  }
}
::v-deep .el-card__body{
  height: 100%;
  border-radius: 3%/3%;
  .el-carousel__button {
    background-color: #475669;
    .is-active {
      background-color: rgb(43 110 80 / var(--tw-bg-opacity, 1)) !important;
    }
  }
}
.sub-img {
  width: 32px;
  height: 32px;
  cursor: pointer;
  position: absolute;
  right: 0.4rem;
  bottom: 0.3rem;
}
.el-row{
  display: block !important;
}
el-col {
  height: auto !important;
}
.is-top {
  overflow: hidden !important;
}
.min-h-screen {
  padding: 1.25rem;
  .disease-left {
    width: 24rem;
    .video-card {
      .demo-tabs {
        border: 0.15rem solid #94b49f;
        border-radius: 3%/3%;
        .el-tabs__header{
          margin: 0 0!important;
        }
        video {
          width: 100%;
          height: 100%;
          opacity: 0.5;
        }
      }
    }
  }
  .disease-right {
    width: calc(100% - 24rem);
    margin: 0 0 0 2rem;
  }
}
.video-upload {
  width: 100%;
  height: auto;
}
.ai-btn {
  margin: 1rem 1rem 0;
  width: calc(100% - 2rem);
}
.drag-box{
	width: 100%;
	background-image:linear-gradient(to right, #d4e207, #f00404);
	// border: 1px solid #23be7b;
	display: flex;
	justify-content: flex-start;
	position: relative;
	height: 1em;
  .shadow-box{
    height: 1em;
    flex: 1;/*根据需要展示方块数调整*/
    box-sizing: border-box;
    border:1px solid white;
    background-color: transparent;
  }
}
.disease-left-cardGroup {
  width: 100%;
  flex: 1;
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
  }
  .input-msg {
    height: 4rem;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
.sub-img {
  width: 32px;
  height: 32px;
  cursor: pointer;
  position: absolute;
  right: 0.4rem;
  bottom: 0.3rem;
}
.el-card {
  border-radius: 3%/3%;
}
</style>
